<template>
    <div id="muke-file-block" v-bind="file">
        <div v-if="file.fileType==='pdf'">
            <pdf id="file-i"></pdf>
        </div>
        <div v-else-if="file.fileType==='word'">
            <word id="file-i"></word>
        </div>
        <div v-else-if="file.fileType==='excel'">
            <excel id="file-i"></excel>
        </div>
        <div v-else-if="file.fileType==='ppt'">
            <ppt id="file-i"></ppt>
        </div>
        <div v-else-if="file.fileType==='txt'">
            <txt id="file-i"></txt>
        </div>
        <div v-else-if="file.fileType==='rar'">
            <rar id="file-i"></rar>
        </div>
        <div v-else-if="file.fileType==='zip'">
            <zip id="file-i"></zip>
        </div>
        <div v-else-if="file.fileType==='mukeHtml'">
            <mukeHtml id="file-i"></mukeHtml>
        </div>
        <div v-else-if="file.type==='folder'">
            <folder id="file-i"></folder>
        </div>
        <div v-else>
            <other id="file-i"></other>
        </div>
        <div id="muke-fileSize">
            <span>{{file.fileSize}}</span>
        </div>
        <div id="muke-filename" >
            <span v-bind:title="file.name">{{file.name}}</span>
        </div>
    </div>
</template>

<script>
    import pdf from '../icons/pdf';
    import word from '../icons/word';
    import excel from '../icons/excel';
    import ppt from '../icons/ppt';
    import txt from '../icons/txt';
    import rar from '../icons/rar';
    import zip from '../icons/zip';
    import mukeHtml from '../icons/html';
    import other from '../icons/other';
    import folder from '../icons/folder';

    export default {
        props:['file'],
        components:{
            pdf,word,excel,
            ppt,txt,rar,zip,
            mukeHtml,other,
            folder
        }
        
    }
</script>

<style scoped>
    #file-i{
        width: 60px;
        height: 60px;
        margin: 10px 14px 0px 14px;
    }
    #muke-file-block{
        border-radius: 10px;
        width: 89px;
        height: 120px;
        margin-right: 10px;
        margin-bottom: 10px;
        float: left;
        /*background-color: aquamarine;*/
    }
    #muke-file-block:hover{
        background-color: #EBEEF5;
        cursor: pointer;
    }
    #muke-filename{
        text-align: center;
        width: 70px;height: 16px;
        margin: 5px 9px;
        overflow:hidden;
        font-family: Poppins;
        font-size: 12px;
        
    }
    #muke-fileSize{
        font-size: 12px;
        text-align: center;
    }
</style>